import { Button, Modal, Text, Transfer, utils } from '@casstime/bricks';
import React from 'react';

interface ICategoryModalProps {
  categoryList: utils.ITree[];
  checkedData?: utils.ITree[];
  hideModal: () => void;
  submit: (data: utils.ITree[]) => void;
}

interface ICategoryModalState {
  treeData: utils.ITree[];
}

export default class CategoryModal extends React.Component<
  ICategoryModalProps,
  ICategoryModalState
> {
  static defaultProps = {
    checkedData: []
  };

  constructor(props: ICategoryModalProps) {
    super(props);
    this.state = {
      treeData: [...props.categoryList]
    };
  }

  componentDidMount() {
    const { checkedData = [], categoryList } = this.props;
    let treeData: utils.ITree[] = [...categoryList];
    checkedData.forEach(v => {
      treeData = this.mapTreeData(v.key, treeData);
      this.setState({
        treeData
      });
    });
  }

  componentWillUnmount() {}

  public render() {
    const { treeData } = this.state;
    return (
      <Modal className="product-update-category-modal" showBackdrop visible>
        <Modal.Header onClose={this.hideModal.bind(this)}>
          <Text bold>选择分类</Text>
        </Modal.Header>
        <Modal.Content>
          <Transfer
            treeData={treeData}
            filterable
            filterPlaceholder="请搜索"
            resultBoxTitle="已选择结果"
            resultShowParent
            resultShowParentTitle
            onChange={this.handleChange.bind(this)}
          />
        </Modal.Content>
        <Modal.Footer>
          <Button onClick={this.submitCategoryData.bind(this)}>确定</Button>
          <Button onClick={this.hideModal.bind(this)} outline>
            取消
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }

  /**
   * 隐藏品类选择弹窗
   */
  hideModal() {
    const { hideModal } = this.props;
    this.setState({
      treeData: utils.clearTreeDataCheckedState(this.state.treeData)
    });
    hideModal();
  }

  /**
   * 修改选择的品类
   */
  handleChange(treeData: utils.ITree[]) {
    this.setState({
      treeData
    });
  }

  /**
   * 提交选择的品类
   */
  submitCategoryData() {
    const { submit } = this.props;
    const checkedLeafs: utils.ITree[] = utils.getTreeDataCheckedLeafs(
      this.state.treeData
    );
    submit(checkedLeafs);
    this.hideModal();
  }

  /***
   * 遍历配件树，若匹配上给节点加上checked:true
   */
  mapTreeData(checkedId: string, list: utils.ITree[]): utils.ITree[] {
    return list.map(category => {
      let checked = false;
      let children = category.children || [];
      if (category.key === checkedId) {
        checked = true;
        return Object.assign(category, {
          children: this.mapTreeData(checkedId, children),
          checked
        });
      } else {
        children = this.mapTreeData(checkedId, children);
        checked =
          category.checked ||
          (!!children.length && children.every(v => !!v.checked));
        return Object.assign(category, { children, checked });
      }
    });
  }
}
